<template>
  <div class="middle">
    <div class="bg">
      <div class="router" v-for="(item, index) in routers" @click="routerClick(index)">
        <div class="word">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routers: [{
        name: '一人一档',
        path: 'people'
      },{
        name: '一企一档',
        path: 'enterprise'
      },{
        name: '一户一档',
        path: 'family'
      },{
        name: '一房一档',
        path: 'room'
      },{
        name: '一车一档',
        path: 'car'
      }]
    };
  },

  mounted() {},

  methods: {
    routerClick(index) {
      this.$router.replace(this.routers[index].path)
    }
  },
};
</script>

<style lang="scss" scoped>
.middle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 123;
  .bg {
    width: 320px;
    height: 262px;
    background: url(~assets/img/day/04-9.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
  }
  .router {
    position: absolute;
    background: url(~assets/img/day/aBg.png) no-repeat;
    background-size: 100% auto;
    width: 138px;
    height: 158px;
    cursor: pointer;
    .word {
      position: absolute;
      left: 9px;
      top: -50px;
      font-size: 26px;
      font-family: "hzgb";
      color: rgb(0, 228, 255);
      width: 120px;
      line-height: 50px;
      text-align: center;
      background: url(~assets/img/day/04-11.png) no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .router:nth-child(1) {
    left: -200px;
    top: 50px;
  }
  .router:nth-child(2) {
    left: -100px;
    bottom: -100px;
  }
  .router:nth-child(3) {
    left: 50%;
    bottom: -200px;
    margin-left: -60px;
  }
  .router:nth-child(4) {
    right: -100px;
    bottom: -100px;
  }
  .router:nth-child(5) {
    right: -200px;
    top: 50px;
  }
}
</style>